<template>
  <view>
    <view>
      <template v-for="item in todoList" :key="item.todoId">
        <todoItem v-if="item" :info="item" :key="item.todoId" :tabType="2">
          <template #body="{ data }">
            <view
              v-for="item in TodoListMap[data.todoType - 1].labelValueList"
              :key="item.prop"
              class="u-m-t-15 u-line-1"
            >
              <text class="u-tips-color">{{ item.label }}：</text>
              <text class="u-content-color" v-if="item.prop === 'amount'">{{
                formatPrice(data[item.prop])
              }}</text>
              <text class="u-content-color" v-else>{{ data[item.prop] }}</text>
            </view>
          </template>
        </todoItem>
      </template>
      <view class="u-p-b-20">
        <u-loadmore :status="status" :load-text="loadText" />
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { queryTodoList } from '@/api/modules/home';
import { TodoListMap } from './index';
import todoItem from './todoItem.vue';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { formatPrice } from '@/utils/tools';

const props = withDefaults(
  defineProps<{
    current: number;
    todoTypeList: any;
  }>(),
  {
    current: 0,
  }
);
const { todoTypeList } = toRefs(props);

const status = ref('loadmore');
const loadText = {
  loadmore: '加载更多',
  loading: '努力加载中',
  nomore: '没有更多了',
};
const todoList = ref<any[]>([]);
const pageNum = ref(1);
const listTotla = ref(0);
// const todoTypeList = ref<any[]>([]);
const queryList = (pageSize = 10) => {
  if (listTotla.value !== 0 && todoList.value.length === listTotla.value) {
    return;
  }
  status.value = 'loading';
  const params: any = {
    pageSize,
    pageNum: pageNum.value,
    todoStatus: 2,
  };
  if (todoTypeList.value && todoTypeList.value.length) {
    params.todoTypeList = todoTypeList.value.join(',');
  }

  queryTodoList(params).then((res: any) => {
    todoList.value = todoList.value.concat(res.list);
    listTotla.value = res.total;
    uni.stopPullDownRefresh();
    if (todoList.value.length === listTotla.value) {
      status.value = 'nomore';
    } else {
      status.value = 'loadmore';
    }
  });
};

// queryList();

const search = () => {
  pageNum.value = 1;
  todoList.value = [];
  listTotla.value = 0;
  console.log(todoList.value);
  queryList();
};

const scrolltoupper = () => {
  pageNum.value += 1;
  queryList();
};
onReachBottom(() => {
  console.log('-------------onReachBottom');

  scrolltoupper();
});

onPullDownRefresh(() => {
  console.log('-------------onPullDownRefresh');
  search();
});

defineExpose({
  search,
});
</script>
